<template>
    <!-- 页面布局card通用组件 -->
    <PageCard>
      <!-- 头部工具栏 -->
      <ToolBar>
        <el-form :model="queryForm" label-width="60px">
          <el-row :gutter="24">
            <el-col :span="6">
              <el-form-item label="关键词:">
                <el-input v-model="queryForm.keyword" placeholder="账号|手机号" style="100%;"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="18">
              <el-button type="default" @click="loadTableData">查询</el-button>
              <el-button type="default" @click="resetQuery">重置</el-button>
              <el-button type="primary" @click="addUser" v-show="$btnPermission.verify('UserAdd')">新增</el-button>
            </el-col>
          </el-row>
        </el-form>
      </ToolBar>

      <!-- 表格 -->
      <TablePage ref="userTablePage" :customTableHeight="255" :loading.sync="loading" :table-data="userTableDatas" :columns="columns" @reloadData="loadTableData"/>

      <!-- 新增 -->
      <AddUser ref="addUser" :title.sync="addUserTitle" :showDialog.sync="addUserVisible" :rowId.sync="rowId" @reloadData="loadTableData"/>
    </PageCard>
</template>
<script>
import PageCard from '@/components/PageCard/index.vue'
import ToolBar from '@/components/ToolBar/index.vue'
import TablePage from '@/components/TablePage/index.vue'

import AddUser from './components/addUser.vue'

import { userPage, userDelete } from '@/api/user'

export default {
  name: 'UserPage',
  components: {
    PageCard,
    ToolBar,
    TablePage,
    AddUser
  },
  data(){
    return {
      loading: false,
      queryForm: null,
      initForm:{
        keyword: ''
      },
      userTableDatas: [],
      columns:[{
        title: '账号',
        name: 'username',
        width: 150,
        align: 'center'
      }, {
        title: '手机号',
        name: 'phone',
        width: 150,
        align: 'center'
      }, {
        title: '账号级别',
        name: 'userLevel',
        width: 150,
        align: 'center',
        select: true,
        options: this.$config.USER_LEVEL
      }, {
        title: '最后登录时间',
        name: 'lastLoginTime',
        width: 250,
        align: 'center'
      }, {
        title: '在线状态',
        name: 'isOnline',
        width: 150,
        align: 'center',
        select: true,
        options: this.$config.ONLINE_STATUS
      }, {
        title: '启用状态',
        name: 'isEnabled',
        width: 150,
        align: 'center',
        select: true,
        options: this.$config.ENABLED_STATUS
      }, {
        title: '创建时间',
        name: 'createTime',
        width: 250,
        align: 'center'
      }, {
        title: '操作',
        name: 'operate',
        width: 250,
        operate: [{
          name: '编辑',
          permission: 'EditUser',
          fun: this.editUser
        }, {
          name: '删除',
          fun: this.deleteUser,
          permission: 'DeleteUser',
          confirm: true,
          message: '确定删除选择的数据吗?',
          customStyle: {
            'margin-left': '10px'
          }
        }]
      }],
      addUserTitle: null,
      addUserVisible: false,
      rowId: null
    }
  },
  created(){
    this.queryForm = { ...this.initForm }
    this.$nextTick(()=> {
      this.loadTableData()
    })
  },
  methods: {
    //加载数据
    async loadTableData(){
      this.loading = true
      const {pageNumber, pageSize} = this.$refs.userTablePage.page
      const res = await userPage({pageNumber, pageSize, ...this.queryForm})
      this.$refs.userTablePage.page.pageNumber = res.data.pageNumber
      this.$refs.userTablePage.page.pageSize = res.data.pageSize
      this.$refs.userTablePage.page.total = res.data.total
      this.userTableDatas = res.data.rows
      this.loading = false
    },

    // 重置查询
    resetQuery(){
      this.queryForm = this.initForm
      this.loadTableData()
    },

    // 新增
    addUser(){
      this.addUserTitle = '新增'
      this.addUserVisible = true
    },

    // 编辑
    editUser(row){
      if(!row) return

      this.addUserTitle = '编辑'
      this.rowId =  row.id
      this.addUserVisible = true
    },

    // 删除
    async deleteUser(row) {
      if(!row) return

      try{
        await userDelete(row.id)
        this.loadTableData()
      }catch(e){
        console.log(e)
      }
    }
  }
}
</script>
<style lang="scss" scoped>

.page-card-container{

  ::v-deep .el-divider--horizontal{
    margin: 0px 0 !important;
    margin-bottom: 24px !important;
  }
}
</style>